<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
<script type="text/javascript">
$(function(){	
	//导航切换
	$(".menuson li").click(function(){
		$(".menuson li.active").removeClass("active")
		$(this).addClass("active");
	});
	
	$('.title').click(function(){
		var $ul = $(this).next('ul');
		$('dd').find('ul').slideUp();
		if($ul.is(':visible')){
			$(this).next('ul').slideUp();
		}else{
			$(this).next('ul').slideDown();
		}
	});
 
	//顶部导航切换
	$(".nav li a").click(function(){
		$(".nav li a.selected").removeClass("selected")
		$(this).addClass("selected");
	});	
 	
})
</script>
<style type="text/css">
	#containerDiv{width: 1200px; margin: auto;}
	#headDiv{height: 88px;background:url(images/topbg.gif) repeat-x;}
	#leftDiv,#rightDiv{float: left;}
	#leftDiv{width: 190px;height: 700px; overflow: hidden;}
	#rightDiv{width: 834px;}
</style>
<title>网站后台管理系统HTML模板--模板之家 www.cssmoban.com</title>
</head>
 
<body>
	 <div id="containerDiv">
	 	<div id="headDiv">
	   <div class="topleft">
    <a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a>
    </div>
        
    <ul class="nav">
    <li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台" /><h2>工作台</h2></a></li>
    <li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理" /><h2>模型管理</h2></a></li>
    <li><a href="imglist.html"  target="rightFrame"><img src="images/icon03.png" title="模块设计" /><h2>模块设计</h2></a></li>
    <li><a href="tools.html"  target="rightFrame"><img src="images/icon04.png" title="常用工具" /><h2>常用工具</h2></a></li>
    <li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理" /><h2>文件管理</h2></a></li>
    <li><a href="tab.html"  target="rightFrame"><img src="images/icon06.png" title="系统设置" /><h2>系统设置</h2></a></li>
    </ul>
            
    <div class="topright">    
    <ul>
    <li><span><img src="images/help.png" title="帮助"  class="helpimg"/></span><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="/logout" target="_parent">退出</a></li>
    </ul>
     
    <div class="user">
    <span>{{admin.aName}}[<span v-for = "role in rolesList">{{role.rolename}}</span>]</span>
    <i>消息</i>
    <b>5</b>
    </div>    
    
    </div> 		
	 	</div>
	 	<div id="bodyDiv">
	 		<div id="leftDiv">
	 			<div class="lefttop"><span></span>通讯录</div>
    
    <dl class="leftmenu">
        
    <dd>
    <div class="title">
    <span><img src="images/leftico01.png" /></span>管理信息
    </div>
    	<ul class="menuson">
        <li><cite></cite><a href="index.html" target="rightFrame">首页模版</a><i></i></li>
        <li class="active"><cite></cite><a href="right.html" target="rightFrame">数据列表</a><i></i></li>
        <li><cite></cite><a href="/security/demo.html" target="rightFrame">security_test</a><i></i></li>
            <li class="active"><cite></cite><a href="bookList.html" target="rightFrame">图书列表</a><i></i></li>
        </ul>
    </dd>
        <dd v-for = "menu in menuList">
            <div class="title">
                <span><img src="images/leftico01.png" /></span>{{menu.pername}}
            </div>
            <ul class="menuson">
                <li v-for = "menuList in menuListMap[menu.id]"><cite></cite>
                    <a v-bind:href="menuList.url" target="rightFrame">{{menuList.pername}}</a><i></i></li>
            </ul>
        </dd>
    </dl>
	 		</div>
	 		<div id="rightDiv">
	 			<iframe  src="default.html" name="rightFrame" frameborder="0" width="1010" scrolling="no" height="700"  ></iframe> 
	 		</div>
	 	</div>
	 </div>
</body>
<script>
    var vm = new Vue({
        el:"#containerDiv",
        data:{
          admin:"",
            rolesList:[],
            menuList:[],
            menuListMap:null
        },
        created(){
          this.loadInitMenu();
        },
        methods:{
            loadInitMenu:function () {
				axios.defaults.withCredentials=true;
                axios.get("http://localhost:8200/menu/initMenu").then(function (obj) {
					if(obj.status==200){
						
                        if(obj.data.code==200){
                            var resultMap = obj.data.result;
                            vm.admin = resultMap.admin;
                            vm.rolesList = resultMap.rolesList;
                            vm.menuList = resultMap.menuList;
                            vm.menuListMap = resultMap.menuListMap;
                        }
					}
                }).catch(function (obj) {
                    alert("错误"+obj);
                })
            }
        }
    });
</script>
</html>
